Buefy is a UI framework that’s based on Bulma.
In this article, we’ll look at how to use Buefy in our Vue app.
Skeleton Loading Placeholder
Buefy comes with a skeleton component that we can use as a placeholder to show when content is loading.
To add it, we can use the b-skeleton component:
<template>
<section>
<b-skeleton width="20%" animated></b-skeleton>
<b-skeleton width="40%" animated></b-skeleton>
<b-skeleton width="60%" animated></b-skeleton>
<b-skeleton width="80%" animated></b-skeleton>
</section>
</template>
<script>
export default {
data() {
return {};
},
methods: {}
};
</script>
width has the width of the bar as the percentage of the screen viewport.
animated makes it animated.
Also, we can add a circle placeholder with the circle prop:
<template>
<section>
<figure class="media-left">
<p class="image is-64x64">
<b-skeleton circle width="64px" height="64px"></b-skeleton>
</p>
</figure>
</section>
</template>
<script>
export default {
data() {
return {};
},
methods: {}
};
</script>
Sidebar
We can add a sidebar with the b-sidebar component.
For instance, we can write:
<template>
<section>
<b-sidebar
type="is-light"
:fullheight="fullheight"
:fullwidth="fullwidth"
:overlay="overlay"
:right="right"
v-model="open"
>
<div class="p-1">
<img src="https://picsum.photos/id/1/100/50" alt="logo">
<b-menu>
<b-menu-list label="Menu">
<b-menu-item label="Info"></b-menu-item>
<b-menu-item icon="settings">
<template slot="label" slot-scope="props">Administrator
<b-icon class="is-pulled-right" :icon="props.expanded ? 'menu-down' : 'menu-up'"></b-icon>
</template>
<b-menu-item label="Users"></b-menu-item>
<b-menu-item>
<template slot="label">Devices
<b-dropdown aria-role="list" class="is-pulled-right" position="is-bottom-left">
<b-icon icon="dots-vertical" slot="trigger"></b-icon>
<b-dropdown-item>action 1</b-dropdown-item>
<b-dropdown-item>action 2</b-dropdown-item>
</b-dropdown>
</template>
</b-menu-item>
</b-menu-item>
</b-menu-list>
<b-menu-list label="Actions">
<b-menu-item label="Logout"></b-menu-item>
</b-menu-list>
</b-menu>
</div>
</b-sidebar>
</section>
</template>
<script>
export default {
data() {
return {
open: true,
overlay: true,
fullheight: true,
fullwidth: false,
right: false
};
}
};
</script>
<style>
.p-1 {
padding: 1em;
}
</style>
to add a sidebar with the b-sidebar component.
type sets the color style.
fullHeight makes it full height.
fullWidth makes it full width.
overlay add an overlay below the sidebar.
right makes it display on the right.
v-model controls the open state of the sidebar.
We can make it static with the position prop et to 'static' :
<template>
<section>
<b-sidebar
position="static"
:fullheight="fullheight"
:fullwidth="fullwidth"
:right="right"
v-model="open"
>
<div class="p-1">
<img src="https://picsum.photos/id/1/100/50" alt="logo">
<b-menu>
<b-menu-list label="Menu">
<b-menu-item label="Info"></b-menu-item>
<b-menu-item icon="settings">
<template slot="label" slot-scope="props">Administrator
<b-icon class="is-pulled-right" :icon="props.expanded ? 'menu-down' : 'menu-up'"></b-icon>
</template>
<b-menu-item label="Users"></b-menu-item>
<b-menu-item>
<template slot="label">Devices
<b-dropdown aria-role="list" class="is-pulled-right" position="is-bottom-left">
<b-icon icon="dots-vertical" slot="trigger"></b-icon>
<b-dropdown-item>action 1</b-dropdown-item>
<b-dropdown-item>action 2</b-dropdown-item>
</b-dropdown>
</template>
</b-menu-item>
</b-menu-item>
</b-menu-list>
<b-menu-list label="Actions">
<b-menu-item label="Logout"></b-menu-item>
</b-menu-list>
</b-menu>
</div>
</b-sidebar>
</section>
</template>
<script>
export default {
data() {
return {
open: true,
overlay: true,
fullheight: true,
fullwidth: false,
right: false
};
}
};
</script>
<style>
.p-1 {
padding: 1em;
}
</style>
Conclusion
We can add placeholders to show when content is loading and a sidebar with Buefy.
